<template>
	<view class="search">
		<view class="searchK">
			<image class="searchIcona" :src="srca"></image>
			<swiper 
				class="swiper" 
				circular 
				:vertical="vertical"
				:disable-touch="disableTouch"
				:indicator-dots="indicatorDots" 
				:autoplay="autoplay" 
				:interval="interval"
				:duration="duration">
				<swiper-item v-for="(tit , index) in textList" :key="index">
					{{ tit.title }}
				</swiper-item>
			</swiper>
		</view>
		<image class="searchIconb" :src="srcb"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				srca: require('static/images/home/search_1.png'),
				srcb: require('static/images/home/store.png'),
				textList: [
					{
						id: 0,
						name: '重生',
						title: '重生我是大富豪'
					},
					{
						id: 1,
						name: '系统',
						title: '系统我是大富豪'
					},
					{
						id: 2,
						name: '都市',
						title: '都市我是大富豪'
					},
					{
						id: 3,
						name: '穿越',
						title: '穿越我是大富豪'
					}
				],
				// 搜索配置
				disableTouch: false, //是否禁止用户 touch 操作
				indicatorDots: false, //是否显示面板指示点
				autoplay: true, //是否自动切换
				vertical:true, //滑动方向是否为纵向
				interval: 50000, //自动切换时间间隔
				duration: 200 //滑动动画时长
			}
		},
		onLoad() {
	
		},
		methods: {
	
		}
	}
</script>

<style lang="less">
	.search{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-top: 5vh;
		padding-bottom: 0.2vh;
		height: 22vw;
		width: 100vw;
		box-sizing: border-box;
		background-color: #f6f2e6;
		.searchK{
			width: 82vw;
			height: 8.5vw;
			margin-left: 4vw;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			background-color: #ffffff;
			border-radius: 5px;
			.searchIcona{
				width: 5vw;
				height: 5vw;
				padding-left: 4vw;
			}
			.swiper{
				padding-left: 3vw;
				font-size: 3.5vw;
				width: 70vw;
				height: 7vw;
				line-height: 7vw;
				color: #bfbfbf;
				font-weight: 300;
			}
		}
		.searchIconb{
			width: 6vw;
			height: 6vw;
			padding-left: 4vw;
		}
	}
</style>